<MudPaper Outlined="true" Class="flex-grow-1 px-4 pt-2 pb-4">
    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
        <MudText Typo="Typo.h6">Cart Summary</MudText>
        <MudIconButton Icon="@Icons.Material.Filled.AttachMoney" Color="Color.Default" Edge="Edge.End" />
    </MudStack>
    <MudStack Spacing="5">
    @if (Items is null or { Count: 0 })
    {
        <MudText Class="py-16" Typo=Typo.h6 Align="Align.Center">Your cart is empty... ☹️</MudText>
    }
    else
    {
        foreach (var item in Items)
        {
            <MudDivider />
            <MudStack Row="true" Justify="Justify.SpaceBetween">
                <MudText Typo=Typo.body2>
                    @(item.Quantity)x @(item.Product.Name)
                </MudText>
                <MudText Typo=Typo.subtitle2>
                    @item.TotalPrice.ToString("C2")
                </MudText>
            </MudStack>
        }
        <MudDivider />
    }
    </MudStack>
    <MudStack Class="mt-4">
        <MudStack Row="true" Justify="Justify.SpaceBetween">
            <MudText Typo=Typo.subtitle1><b>Pretax Total:</b></MudText>
            <MudText Typo=Typo.subtitle1><b>@_totalCost</b></MudText>
        </MudStack>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" 
            Disabled="@(Items?.Count() == 0 ? true : false)" DisableElevation
            Size=@Size.Large>
            Checkout
        </MudButton>
    </MudStack>
</MudPaper>

@code {
    string _totalCost => Items?.Sum(x => x.TotalPrice).ToString("C2") ?? "$0.00";

    [Parameter, EditorRequired]
    public HashSet<CartItem>? Items { get; set; }
}